<template>
  <view>
    <view class="publicHeader" :class="{ blackBg: blackBg }">
      <view
        v-if="!transparent"
        :class="['headerBar', { 'app-header': entrance == 'app' }]"
        :style="{ height: headerHeight + addHeight + 'px' }"
      ></view>
      <view
        class="headerBox"
        :class="{ shadow: isShadow }"
        :style="{ height: headerHeight + 'px', 'background-color': backgroundColor }"
      >
        <view
          :class="['headerCont', 'flex', 'ac', { 'flex-c': showSearch }]"
          @click="openDebug"
          data-ui="0"
        >
          <template v-if="isShowFloatBack || isShowReturnLayer">
            <image
              class="back"
              src="https://ss.migudm.cn/malleoc/public/back_write.png"
              v-if="whiteStyle"
              @click.prevent="goBack"
            ></image>
            <image
              class="back"
              src="https://ss.migudm.cn/malleoc/public/back.png"
              v-if="!whiteStyle"
              @click.prevent="goBack"
            ></image>
          </template>
          <template v-if="showHome">
            <image
              class="home"
              :class="{ 'no-left': !isShowFloatBack || isShowReturnLayer }"
              :src="'malleoc/activity/ic_nav_home_white@2x.png' | imgUrlForm"
              v-if="whiteStyle"
              @click.prevent="goShopHome"
            ></image>
            <image
              class="home"
              :class="{ 'no-left': !isShowFloatBack || isShowReturnLayer }"
              :src="'malleoc/activity/ic_backhomepage@2x.png' | imgUrlForm"
              v-else
              @click.prevent="goShopHome"
            ></image>
          </template>
          <view :class="['title', { white: whiteStyle }]" v-if="!showSearch"
            >{{ headerTitle }}<slot></slot
          ></view>
          <view
            v-if="showSearch"
            @click="handleSearch"
            :class="['search-bar', { 'short-search': ifAPPMenu }, { 'back-color': !whiteStyle }]"
          >
            <image
              class="search-icon"
              src="https://ss.migudm.cn/malleoc/img/index/ic_index_search.png"
            ></image>
            <view class="search-input">搜索</view>
          </view>
          <image
            class="shareImg"
            v-if="showShare && isMiguvideo"
            src="https://ss.migudm.cn/malleoc/public/ic_miguc_share_grey.png"
            @click.prevent="shareWindow"
          ></image>
          <image
            class="shareImg"
            v-if="showShare && !isMiguvideo"
            src="https://ss.migudm.cn/malleoc/public/ic_miguc_share_grey.png"
            v-clipboard:copy="locationUrl"
            v-clipboard:error="setboardError"
            v-clipboard:success="setboard"
          ></image>
        </view>
      </view>
    </view>
    <view class="nav-title publicHeader" v-if="showTitle">
      <view class="title">{{ headerTitle }}</view>
    </view>

    <!-- 标题高度大于0 不需要悬浮按钮 -->
    <!-- <view class="float-header flex jb" v-if="(isShowFloatHeader || isShowShare == 1) && headerHeight == 0"> -->
    <image
      class="header-icon fixed-left"
      v-if="(isShowFloatBack && headerHeight == 0) || isShowReturnLayer"
      src="https://ss.migudm.cn/malleoc/public/ic_nav_back.png"
      @click.prevent="goBack"
    ></image>
    <!-- <image class="header-icon" v-else></image> -->
    <image
      class="header-icon fixed-right"
      v-if="showShare && isMiguvideo && headerHeight == 0"
      src="https://ss.migudm.cn/malleoc/public/ic_nav_share.png"
      @click.prevent="shareWindow"
    ></image>
    <image
      class="header-icon fixed-right"
      v-if="showShare && !isMiguvideo && headerHeight == 0"
      src="https://ss.migudm.cn/malleoc/public/ic_nav_share.png"
      v-clipboard:copy="locationUrl"
      v-clipboard:error="setboardError"
      v-clipboard:success="setboard"
    ></image>
  </view>
</template>

<script>
//#ifdef H5
import moreNorm from './moreNorm.vue'
//#endif
export default {
  data() {
    return {
      entrance: this.$globalData.state.entrance,
      appv: this.$globalData.state.appv,
      debugClick: 0, //点击头部标题次数
      debugClickTimeout: 0,
      isMiguvideo: false, //是否 视讯App
      locationUrl: '', //当前地址
      currentUrl: '',
      pageLength: 0,
    }
  },
  components: {
    //#ifdef H5
    moreNorm,
    //#endif
  },
  computed: {
    ifAPPMenu() {
      return this.entrance == 'app' || this.entrance == 'mp-weixin'
    },
    backgroundColor() {
      if (this.transparent) return ''
      return this.bgColor
    },
    blackBg() {
      return this.entrance == 'app' && this.appv < '6.0.190704'
    },
    showTitle() {
      let titlePages = ['package_order/order/list']
      return (
        this.isShowFloatBack &&
        this.$globalData.state.headerHeight == 0 &&
        titlePages.includes(this.currentUrl)
      )
    },
    headerHeight() {
      if (!this.isShowHeader) return 0
      return this.$globalData.state.headerHeight
    },
    isShowFloatHeader() {
      return this.$globalData.state.scene.headerType == 0 || this.isShowHeader != 1
    },
    isShowReturnLayer() {
      //返回图层
      if (this.$globalData.state.isShowCategoryIcon) {
        //如果展示分类,不展示返回图层按钮,防止样式重叠
        return false
      }
      return this.$globalData.state.returnLayerUrl
    },
    displayDetail() {
      //是否展示更多按钮
      // #ifdef MP-WEIXIN
      return false
      // #endif
      // #ifdef H5
      let showMorePages = ['pages/goods/detail']
      return this.$globalData.state.scene.displayDetail && showMorePages.includes(this.currentUrl)
      // #endif
    },
    showShare() {
      //是否展示 外部分享按钮
      if (this.displayDetail) return false
      // #ifdef MP-WEIXIN
      return false
      // #endif
      // #ifdef H5
      let noShowSharePages = [
        'package_order/order/list',
        'package_order/order/detail',
        'pages/cart/goodsCart',
        'package_user/viewHistory/viewHistory',
        'package_user/address/usableList',
        'package_user/address/addAndEdit',
        'package_order/order/create',
      ]
      if (noShowSharePages.includes(this.currentUrl)) return false

      if (this.isShowShare) {
        if (this.$globalData.state.scene.showShare) return true
        return this.$globalData.state.frontConfig.isShowShare
      } else {
        return false
      }
      // #endif
    },
    isShowFloatBack() {
      let pages = getCurrentPages()
      // #ifdef H5
      if (pages.length > 1) {
        return this.canBack
      } else {
        return document.referrer && document.referrer.indexOf('transferPage.html') == -1
      }
      // #endif
      // #ifdef MP-WEIXIN
      if (pages.length == 1 && pages[0].route == 'pages/index/index') {
        return true
      }
      return pages.length > 1 && this.canBack
      // #endif
    },
  },
  props: {
    showSearch: {
      type: Boolean,
      default: false,
    },
    canBack: {
      type: Boolean,
      default: true,
    },
    backFun: {
      //点返回按钮时的函数，默认为返回上一级
      type: Function,
      default: undefined,
    },
    headerTitle: {
      type: String,
      default: '福建省创新博士站',
    },
    isShadow: {
      type: Boolean,
      default: false,
    },
    addHeight: {
      //除了header栏之外的顶部高度，比如搜索栏，固定在头部tab栏
      type: Number,
      default: 0,
    },
    bgColor: {
      type: String,
      default: '#fff',
    },
    showHome: {
      type: [Boolean, String, Number],
      default: false,
    },
    homeType: {
      type: String,
      default: 'index',
    },
    backHome: {
      //防止次级页面，不能正常返回，直接返回首页
      type: Boolean,
      default: false,
    },
    activityId: {
      //活动ID
      type: String,
      default: '',
    },
    shopId: {
      //店铺ID
      type: Number,
      default: 0,
    },
    shareData: {
      //分享信息
      type: Object,
      default: () => {
        return {}
      },
    },
    isShowHeader: {
      type: [Number, String],
      default: 1,
    },
    isShowShare: {
      //分享信息
      type: [Number, String],
      default: 1,
    },
    isShowSearch: {
      type: Boolean,
      default: false,
    },
    transparent: {
      // 是否透明底色
      type: Boolean,
      default: false,
    },
    whiteStyle: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // const scriptEle = document.createElement("script");
    // scriptEle.onload = function() {
    // 	new window.VConsole();
    // }
    // scriptEle.src = "//ss.migudm.cn/lib/vconsole/3.3.0/vconsole.min.js";
    // document.getElementsByTagName("head")[0].appendChild(scriptEle);
    // #ifdef H5
    let ua = navigator.userAgent.toLowerCase()
    if (ua.indexOf('miguvideo') >= 0 || __if8min__) {
      this.isMiguvideo = true
    }
    this.locationUrl = window.location.href
    // #endif
    // 获取当前页面的路径
    let pages = getCurrentPages()
    this.pageLength = pages.length
    this.currentUrl = pages[pages.length - 1].route
  },
  methods: {
    handleSearch() {
      this.$emit('search')
    },
    goBack() {
      if (this.backFun) {
        if (this.$globalData.state.entrance == 'mp-weixin') {
          this.backFun(this.$parent)
        } else {
          this.backFun(this.$parent.$parent)
        }
      } else {
        this.$utils.backFresh(this.homeType)
      }
    },
    //开发用，1秒钟内点击6次以上头部标题
    openDebug() {
      // #ifdef H5
      if (this.debugClick === false) {
        return
      }
      this.debugClick++
      clearTimeout(this.debugClickTimeout)
      this.debugClickTimeout = setTimeout(() => {
        this.debugClick = 0
      }, 1000)
      if (this.debugClick >= 6) {
        // 不在触发初始化
        clearTimeout(this.debugClickTimeout)
        this.debugClick = false
        const scriptEle = document.createElement('script')
        scriptEle.onload = function () {
          new window.VConsole()
        }
        scriptEle.src = '//ss.migudm.cn/lib/vconsole/3.3.0/vconsole.min.js'
        document.getElementsByTagName('head')[0].appendChild(scriptEle)
      }
      // #endif
    },
    goHome() {
      this.$routeUtils.reLaunch({
        url: '/pages/index/index',
      })
    },
    goShopHome() {
      if (this.shopId != 0 && this.shopId != 1) {
        this.$routeUtils.reLaunch({
          url: `/package_shop/index?shopId=` + this.shopId,
        })
      } else if (this.shopId == 1) {
        //咪咕精选商城详情页面，返回潮物说首页
        this.$routeUtils.reLaunch({
          url: `/pages/index/home`,
        })
      } else {
        this.goHome()
      }
    },
    shareWindow() {
      // #ifdef H5
      let ua = navigator.userAgent.toLowerCase()
      if (ua.indexOf('miguvideo') >= 0 || __if8min__) {
        __if8min__ ? this.$share.baMinShare(this.shareData) : this.$share.sxShare(this.shareData)
      }
      // #endif
    },
    setboard() {
      let self = this
      // #ifdef  H5
      self.$utils.toast('复制链接成功！')
      // #endif
    },
    setboardError(e) {
      this.$utils.toast('浏览器暂不支持快捷复制！')
    }, //判断当前链接是否在数组中
    includesList(urlList) {
      try {
        let checkUrl = location.pathname || ''

        return urlList.includes(mCheckUrl)
      } catch (e) {
        return false
        //TODO handle the exception
      }
    },
  },
}
</script>

<style lang="scss">
.search-bar {
  width: 530rpx;
  height: 60rpx;
  background: #ffffff;
  border-radius: 32rpx;
  display: flex;
  margin-left: 165rpx;
  align-items: center;
  padding-left: 20rpx;
  .search-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 19rpx;
  }
  .search-input {
    flex: 1;
    text-align: left;
  }
  .delect-view {
    width: 64rpx;
    height: 100%;
  }
}
.short-search {
  width: 356rpx;
  margin-left: 0rpx;
}
.nav-title {
  position: fixed;
  display: flex;
  height: 88rpx;
  background: #fff;
  width: 100%;
  top: 0px;
  z-index: 901;
  padding: 0 16rpx;
  .title {
    color: #333;
    font-size: 17px;
    font-weight: 600;
    max-width: 60%;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 25rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.publicHeader {
  .app-header {
    /*  #ifndef MP-WEIXIN*/
    background-color: #121223;
    /*  #endif  */
  }
  .headerBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    // height: 32px;
    .headerCont {
      height: 44px;
      position: absolute;
      bottom: 0;
      text-align: center;
      // line-height: 44px;
      width: 100%;
      .back {
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        left: 0px;
        // top: 0;
        // margin-top:14rpx;
        margin-left: 16rpx;
      }
      .home {
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        left: 74rpx;
        // top: 0;
        // margin-top: 14rpx;
        margin-left: 16rpx;
      }
      .no-left {
        left: 0rpx;
      }
      .title {
        color: #333;
        font-size: 17px;
        font-weight: 600;
        max-width: 60%;
        overflow: hidden;
        margin: 0 auto;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .white {
        color: #fff;
      }
      .shareImg {
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        right: 16rpx;
      }
    }
    &.shadow {
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    }
  }
  &.blackBg {
    .headerBar {
      background: hsl(240, 32%, 10%);
    }
    .headerBox {
      background: hsl(240, 32%, 10%);
    }
    .headerCont .title {
      color: #e1dfed;
    }
  }
}
.float-header {
  position: fixed;
  z-index: 998;
  width: 100%;
  top: 24rpx;
  padding: 0 16rpx;
}
.header-icon {
  width: 60rpx;
  height: 60rpx;
}
.fixed-left {
  left: 16rpx;
  position: fixed;
  top: 24rpx;
  z-index: 909;
}
.fixed-right {
  right: 16rpx;
  position: fixed;
  top: 24rpx;
  z-index: 909;
}
.back-color {
  background-color: #f6f6f6;
}
</style>
